<template>
  <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" :show-item="4" v-model="query" :formItems="formItems" @search="onSearch" @reset="onReset"></common-search>
  <a-tooltip>
    <template #title>
      <div>
        <div>1、实际GMV：为卡派or快递中实际GMV占比。实际GMV即剔除折扣税金等</div>
        <div>2、无重发实际GMV：卡派or快递中，中无重发单的纯血卡派or快递订单费用的GMV占比</div>
        <div>3、跨区物流订单：卡派or快递订单中，含有跨区的订单数占比。如卡派跨区物流订单占比则公式为：跨区的卡派订单/总卡派订单数</div>
      </div>
    </template>
    <QuestionCircleOutlined style="position: absolute;top: 100px;left: 210px;"/>
  </a-tooltip>
  <a-row justify="space-between">
    <a-col :xl="12" :xxl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <div class="line-chart" ref="rankRef"></div>
    </a-col>
    <a-col :xl="12" :xxl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <div class="line-chart" ref="truckRankRef"></div>
    </a-col>
  </a-row>
  <a-button type="primary" @click="exports" :loading="exportLoading" v-modulePerm="['gmvRate:export']">
    <template #icon>
      <ExportOutlined />
    </template>
    明细导出
  </a-button>
  <common-table
      :columns="columns"
      :dataSource="dataList"
      v-model:loading="loading"
      v-model:localPagination="page"
      @paginationChange="onPageChange"
      :scroll="{ x: 2000, y: 300 }"
  >
  </common-table>

</template>
<script>
export default {
  name:"tail-gmvRate"
}
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import { ref, onMounted,watch } from "vue";
import {message} from "ant-design-vue";
import {postFile} from "@utils/service/index.js";
import {getManyDictItems} from "@/api/system/dict.js";
import {useEcharts} from "@/hooks/echarts/useEcharts.js";
import {getChartExpress, getChartTruck, getRateOfTailEnd} from "@/api/tail/gmvRate.js";
import {getBeforeMonthDate} from "@utils/utils.js";
const rankRef = ref()
const truckRankRef = ref()
let instance
let instance1
const columns = [
  {
    title: "物流单号",
    dataIndex: "saleOrderCode",
    align: 'center',
  },
  {
    title: "平台",
    dataIndex: "platform",
    align: 'center'
  },
  {
    title: '站点',
    dataIndex: 'site',
    key: 'ordCnt',
    align: 'center'
  },
  {
    title: '下单时间',
    dataIndex: 'orderTime',
    align: 'center'
  },
  {
    title: '尾程费用',
    dataIndex: 'freightFee',
    key: 'freightFee',
    align: 'center'
  },
  {
    title: 'GMV',
    dataIndex: 'gmv',
    key: 'truckCnt',
    align: 'center'
  },
  {
    title: '承运商编码',
    dataIndex: 'carrierCode',
    key: 'carrierCode',
    align: 'center'
  },
  {
    title: '是否跨区(仅限美国订单)',
    key: 'isCrossZone',
    dataIndex: 'isCrossZone',
    align: "center"
  },
  {
    title: '重发标识',
    key: 'reloadFlag',
    dataIndex: 'reloadFlag',
    align: "center"
  },
  {
    title: '运输类型',
    key: 'deliveryType',
    dataIndex: 'deliveryType',
    align: "center"
  },
];
const formItems = ref([
  {
    label: '站点',
    field: 'sites',
    type: 'select',
    options: [],
    multiple:true
  },
  {
    label:'平台',
    field: 'platforms',
    type: 'select',
    options: [],
    multiple:true
  },
  {
    label:'下单时间',
    field: 'time',
    type:'rangePicker',
    showTime: false,
  },
  {
    label:'时间维度',
    field: 'timeType',
    type:'select',
    notClear:false,
    options:[
        {
          label:'月',
          value:'month'
        },
        {
          label:'周',
          value:'week'
        },
    ]
  }
]);

const exportLoading = ref(false);
const { dataList, query, loading, search, reset, page, onPageChange } = useSearchTable({
  searchAPI: getRateOfTailEnd,
  queryFactory: () => {
    return {
      timeType:'month',
      time:getBeforeMonthDate(3),
    }
  },
  beforeSearch: () => {
    console.log(query.value)
    if(query.value.time){
      query.value.createOrderTimeBegin = query.value.time[0]
      query.value.createOrderTimeEnd = query.value.time[1]
    }else{
      delete query.value.createOrderTimeBegin
      delete query.value.createOrderTimeEnd
    }
  },
  afterSearch:async () => {
  }
});
let outerRankInitChart = () => {

}
let outerTruckRankInitChart = () => {

}
const exports = async () => {
  try{
    exportLoading.value = true;
    let obj = query.value
    const res = await postFile('/wms/report_form/gmv/export_rate_of_tail_end','post',obj,`尾程费用占订单预估GMV占比明细.xlsx`)
    message.success('导出成功')
  }catch (e) {
    message.error(e);
  }finally {
    exportLoading.value = false;
  }
}
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"site,platform_freight_cross"
    })
    formItems.value[0].options = res.result.site
    formItems.value[1].options = res.result.platform_freight_cross

  }catch (e){
    console.log(e)
  }
}
const onSearch =  () => {
  console.log(123456)
  Promise.all([search(),initChartTruck(),initChartExpress()])
}
const onReset =  () => {
  query.value.timeType ='month'
  reset()
  Promise.all([initChartTruck(),initChartExpress()])
}
const change = (data,x,text) => {
  let option = {
    title: {
      text,
      left: 'center',
      top:"5%"
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      data: ['实际GMV占比','无重发实际GMV占比','跨区物流订单占比']
    },
    xAxis: {
      type: 'category',
      data: [],
      name: query.value.timeType === 'week'? '周' : '月'
    },
    yAxis: {
      type: 'value',
      name:'实际GMV占比'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: []
  }
  option.xAxis.data = x
  option.series = data
  return option
}
const initChartExpress = async () => {
  const res = await getChartExpress(query.value)
  let series = []
  let x = res.result.records.map(item => item.dateStr)
  series = [
    {
      name:'实际GMV占比',
      type:'bar',
      data:res.result.records.map(item => item.gmvRate)
    },
    {
      name:'无重发实际GMV占比',
      type:'bar',

      data:res.result.records.map(item => item.gmvRateNotReload)
    },
    {
      name:'跨区物流订单占比',
      type:'bar',
      data:res.result.records.map(item => item.rateCrossZone)
    },
  ]
  const { initChart } = useEcharts(instance,rankRef, change(series,x,'快递图表-尾程费用占订单实际GMV占比'))
  outerRankInitChart = initChart
  initChart()
}
const initChartTruck = async () => {
  const res = await getChartTruck(query.value)
  let series = []
  let x = res.result.records.map(item => item.dateStr)
  series = [
    {
      name:'实际GMV占比',
      type:'bar',
      data:res.result.records.map(item => item.gmvRate)
    },
    {
      name:'无重发实际GMV占比',
      type:'bar',
      data:res.result.records.map(item => item.gmvRateNotReload)
    },
    {
      name:'跨区物流订单占比',
      type:'bar',
      data:res.result.records.map(item => item.rateCrossZone)
    },
  ]
  const { initChart } = useEcharts(instance1,truckRankRef, change(series,x,'卡派图表-尾程费用占订单实际GMV占比'))
  outerTruckRankInitChart = initChart
  initChart()
}
onMounted(() => {
  Promise.all([init(),initChartExpress(),initChartTruck()])
})
</script>
<style scoped>
.line-chart {
  width:90%;
  height:400px;
}
</style>
